<template>
  <div class="shopDetail">
      <van-nav-bar title="商品详情" left-arrow @click-left="$router.history.go(-1)">
        <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
      </van-nav-bar>
      <div class="topMenu flex_between" >
        <span>谁想要</span>
          <span v-if='more' @click='more=!more'>查看更多<img src='../../../public/images/down.png' /></span>
          <span v-else @click='more=!more'>收起<img src='../../../public/images/up.png'/></span>
      </div>
        <div class="peopleMessage"  v-for='(item,index) in people' :key='index' v-if='info.status==1 || info.status==2'>
          <img :src='item.userPhoto' class="peoplePho l"/>
          <div class="center l">
            <h1>{{item.userName}}</h1>
            <div><img src="../../../public/images/huizhang.png"/>信用值 &nbsp{{item.creditNum}} </div>
          </div>
          <div class="r tishi">
            <h2>{{item.orderCreateTime}}</h2>
            <p v-if='item.status==1'>点了“我想要”，请处理</p>
            <p class="wancheng" v-if='item.status==2'>已完成</p>
          </div>
          <div class="clear"></div>
        </div>
        <!-- <div class="comment mb-30">
          <div class="commentInfo">
            <p>东西还可以，和描述的相符，卖主人也很好，帮我直接拿到宿舍楼下了</p>
            <div class="commentIcon flex">
              <img src="../../../public/images/commentActive.png"/>
              <img src="../../../public/images/commentActive.png"/>
              <img src="../../../public/images/commentActive.png"/>
            </div>
          </div>
          <div class="bottom">
            <div class="peopleNum l" @click='$router.push({path:"leaveMessage"})'>回复</div>
            <div class="otherNum2 r" @click='$router.push({path:"appeal"})'><img src="../../../public/images/qt_83.png"/>申诉</div>
            <div class="clear"></div>
          </div>
        </div> -->
        <!-- </transition> -->
        <div :class="{'shopMessage xiaoshou mt-30':info.status==0,'shopMessage  mt-30':info.status==1,'shopMessage finish mt-30':info.status==2}">
      <!-- <div :class="info.status==1? 'shopMessage mt-30': 'shopMessage mt-30 finish'"> -->
        <div class="title">
          <p class="l">{{info.title}}</p>
          <div class="publicTags l">{{info.quality}}</div>
          <div class="clear"></div>
        </div>
        <p class="time">{{info.dbCreateTime}} 发布</p>
        <div class="price">
          <p class="l">￥{{info.price}}</p>
          <div class="tags_1 l" v-if='info.bargain==0'>不讲价</div>
          <div class="tags_1 l" v-else>可议价</div>
          <div class="clear"></div>
        </div>
        <div class="navs mt-10 flex_between">
          <div class="navTxt">
            <p class="hide_otherThree">{{info.content}}</p>
          </div>
          <img :src="info.images[0]" />
        </div>
        <div class="bot">
          <div class="l">868人看到</div>
          <div class="otherNum1 ml-70 l"><img src="../../../public/images/qt_80.png"/>{{info.commentNum}}</div>
          <div class="otherNum2 ml-70 l"><img src="../../../public/images/qt_78.png"/>{{info.thumbUpNum}}</div>
          <!-- <div class="jubao r"><img src="../../../public/images/qt_83.png"/>举报</div> -->
          <div class="clear"></div>
        </div>
      </div>
      <div class="liuyanTitle flex_between">
        <h3>全部留言</h3>
        <p>{{comments.totalNum}}条</p>
      </div>
      <ul class="liuyanList">
        <li class="flex_between mb-20" v-for='(item,index) in comments.curPageData' :key='index'>
          <div class="left" @click.stop='$router.push({path:"otherUser",query:{userId:item.userId}})'><img :src='item.userPhoto' width="100%" height="100%"/></div>
          <div class="right ml-30">
            <div class="rightTop">
              <div class="name l hide_other">{{item.userName}}</div>
              <div class="r hf" @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:item.commentId}})'>回复</div>
              <div class="r mr-60 otherNum1"><img src="../../../public/images/qt_80.png"/>{{item.thumbUpNum}}</div>
              <div class="clear"></div>
            </div>
            <div class="txt">{{item.content}}</div>
            <ul v-if='item.comments.length!=0'>
              <li v-for='(items,indexs) in item.comments' :key='indexs' @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:items.commentId}})'>{{item.userName}}：<span>{{items.content}}</span></li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="menu" v-if='info.status==0'>
        <div class="del l" @click='del'><img src="../../../public/images/qt_65.png"/> 删除宝贝</div>
      </div>
      <div class="menu" v-else-if='info.status==1'>
        <!-- <div class="del l" @click='del'><img src="../../../public/images/qt_65.png"/> 删除宝贝</div> -->
        <div class="sure btn r" @click='finish()'>交易完成</div>
        <div class="jiaoyi btn r" @click='wantMay(order.curOrderId,"-1")'>继续交易</div>
      </div>
      <div class="menu" v-else-if='info.status==2'>
        <div class="del l" @click='del'><img src="../../../public/images/qt_65.png"/> 删除宝贝</div>
        <div class="wancheng btn r">已完成</div>
        <!-- <div class="jiaoyi btn r">继续交易</div> -->
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      info:{},
      comments:{},
      more:true,
      order:{},
      people:[]
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.market.detail,{commodityId:this.$route.query.categoryId}).then(data=>{
        if(data.data.commodity.status!=0) this.getOtherPeople(data.data.order.userId);
        data.data.commodity.dbCreateTime=this.ConvertIso(data.data.commodity.dbCreateTime)
        data.data.commodity.images=JSON.parse(data.data.commodity.images);
        this.order=data.data.order;
        this.info=data.data.commodity;
        data.data.comments.curPageData.forEach((item,index)=>{
          this.getMorecomments(item.commentId)
        })
        this.comments=data.data.comments;
      });
    },
    getMorecomments(targetId){
      this.$get(this.$api.blog.postsComments,{targetType:2,targetId:targetId,page:1,size:10}).then(data=>{
          console.log(data.data);
          this.comments.curPageData.forEach((item,index,array)=>{
             if(item.commentId==targetId) this.$set(this.comments.curPageData[index],'comments',data.data.curPageData);
          });
          console.log(this.comments);
      });
    },
    getOtherPeople(id){
      this.$get(this.$api.user.otherInfo,{userId:id}).then(data=>{
        data.data.status=this.order.orderStatus;
        console.log(data)
        // if(!data.data.userPhoto) data.data.userPhoto=require('../../../public/images/avtor.png')
        this.people.push(data.data);
        
        console.log(this.people);
      })
    },
    del(){
      let that=this;
      this.$dialog.confirm({
        title: '',
        message: '确认删除该宝贝么？'
      }).then(() => {
        that.$post(that.$api.market.delete,{commodityId:that.$route.query.categoryId}).then(data=>{
          that.$toast.success({message:'删除成功',duration:500,onClose(){
            that.$router.push({path:'myShop'})
          }});
        })
      }).catch(() => {
        // on cancel
      });
    },
    wantMay(commodityId,deal){
      let that=this;
      this.vueBuy(commodityId,deal,function(data){
        that.$toast({message:'成功',duration:500,onClose(){
          that.message();
        }})
        // that.$router.push({path:'orderDetail1',query:{id:data}});
      })
    },
    finish(){
      let that=this;
      that.$post(that.$api.market.finish,{orderId:this.order.curOrderId}).then(data=>{
          that.$toast.success({message:'交易完成',duration:500,onClose(){
            that.getMessage();
          }});
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopDetail{background-color: #F5F5F5;}
  .topMenu{font: 0.3rem/0.4rem '微软雅黑';color: #333333;padding: 0.3rem;background-color: #fff;}
  .topMenu span:nth-of-type(2){color: #999;font-size:0.24rem;}
  .topMenu span:nth-of-type(2) img{width: 0.24rem;height: 0.24rem;display: inline-block;margin: 0 0 0.05rem 0.1rem;}
  .peopleMessage{padding: 0 0.3rem 0.3rem 0.3rem;background-color: #fff;}
  .peopleMessage .peoplePho{width: 0.8rem;height: 0.8rem;display: block;border-radius: 50%;overflow: hidden;}
  .peopleMessage .center{margin-left: 0.28rem;}
  .peopleMessage .center h1{font: 0.3rem/0.4rem '微软雅黑';color: #4AACE9;}
  .peopleMessage .center div{font: 0.24rem/0.4rem '微软雅黑';color: #999999;}
  .peopleMessage .center div img{display: inline-block;width:0.24rem;height: 0.24rem;margin: 0 0.1rem 0.05rem 0;}
  .peopleMessage .tishi h2{font: 0.24rem/0.4rem '微软雅黑';color: #999999;text-align: right;}
  .peopleMessage .tishi p{font: 0.24rem/0.4rem '微软雅黑';color: #4AACE9;text-align: right;}
  .peopleMessage .tishi .wancheng{color: #29C95E;}
  .shopMessage{padding: 0.3rem;position: relative;background-color: #fff;}
  .shopMessage::before{content: '交易中';background-color: #4AACE9;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .finfish::before{content: '已完成';background-color: #CCCCCC;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .xiaoshou::before{content: '销售中';background-color: #F88222;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessage .title{font: 0.42rem/0.6rem '微软雅黑';color: #333333;}
  .shopMessage .title p{display: inline-block;}
  .shopMessage .title .publicTags{margin-top: 0.15rem;}
  .shopMessage .time{font: 0.24rem/0.4rem '微软雅黑';color: #999;}
  .shopMessage .price p{font: 0.48rem/0.8rem '微软雅黑';color: #E63D40;display: inline-block;}
  .shopMessage .price .tags_1{border-radius: 0.18rem;background-color: #EDF0F2;text-align: center;color: #999999;font: 0.18rem/0.36rem '微软雅黑';width: 0.82rem;height: 0.36rem;margin-top: 0.22rem;margin-left: 0.24rem;}
  .shopMessage .navs .navTxt{height:1.65rem;flex: 1;border: 2px solid #DDDDDD;box-sizing: border-box;}
  .shopMessage .navs .navTxt p{font: 0.28rem/0.34rem '微软雅黑';color: #333333;margin: 0.26rem;}
  .shopMessage .navs img{width:2.14rem;height:1.65rem;display: block;}
  .shopMessage .bot{font: 0.24rem/0.4rem '微软雅黑';color:#AAAAAA;margin-top: 0.34rem;}
  .shopMessage .bot img{width: 0.34rem;height: 0.34rem;display: inline-block;margin:0 0.1rem 0.1rem;}
  .liuyanTitle{padding:0.28rem;background-color: #fff;font: 0.3rem/0.5rem '微软雅黑';}
  .liuyanTitle h3{color: #000;}
  .liuyanTitle p{color: #AAAAAA;}
  .liuyanList{padding: 0.3rem;background-color: #fff;margin-bottom: 1.2rem;}
  .liuyanList>li .left{width: 0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;}
  .liuyanList>li .right{flex: 1;}
  .liuyanList>li .rightTop {font: 0.24rem/0.7rem '微软雅黑';color: #AAAAAA;}
  .liuyanList>li .rightTop .otherNum1{}
  .liuyanList>li .rightTop .otherNum1 img{width: 0.3rem;height: 0.3rem;display: inline-block;margin: 0.2rem;}
  .liuyanList>li .rightTop .name{color: #4AACE9;font: 0.32rem/0.7rem '微软雅黑';width: 3rem;}
  .liuyanList>li .txt{margin: 0.28rem 0;font: 0.34rem/0.5rem '微软雅黑';color: #323333;}
  .liuyanList>li ul{background-color: #F7F7F7;padding: 0.21rem;}
  .liuyanList>li ul li{font: 0.3rem/0.5rem '微软雅黑';color: #929292;}
  .liuyanList>li ul li span{color: #323333;}
  .menu{position: fixed;left: 0;bottom: 0;background-color: #fff;width: 100%;border-top: 1px solid #F7F7F7;}
  .menu .del{margin-left: 0.62rem;font-size: 0.26rem;line-height: 1.2rem;color: #333333;}
  .menu .del img{width: 0.3rem;height: 0.28rem;display: inline-block;margin: 0 0.1rem 0.05rem 0;}
  .menu .btn{width: 1.88rem;height: 0.8rem;border-radius: 0.4rem;text-align: center;font: 0.3rem/0.8rem '微软雅黑';margin-top: 0.2rem;color: #fff;margin-bottom: 0.2rem;}
  .menu .jiaoyi{background-color: #F88222;margin-right: 0.42rem;}
  .menu .sure{background-color: #4AACE9;margin-right: 0.3rem;}
  .menu .wancheng{background-color: #CCCCCC;margin-right: 0.3rem;}

  .comment{padding:0.3rem;background-color: #fff;}
  .comment p{font: 0.28rem/0.4rem '微软雅黑';color: #333333;}
  .comment .commentIcon{margin: 0.23rem 0;}
  .comment .commentIcon img{width: 0.32rem;height: 0.34rem;margin-right: 0.21rem;display: block;}

  .comment .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .comment .bottom .otherNum1{float: right;}
  .comment .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;}
  .myactive-enter{ 
    /* 此处是动画进入时的css设置，如果有位置移动的话，不要使用position来控制，会没有效果的，使用 transform:translateY 或者 translateX来控制 */
        /* transform:translateY(-500px); */
       opacity:1;
    }
    .myactive-leave-avtive{
      /* //此处地动画飞出时的设置 */
        /* transform:translateY(500px); */
        opacity:0;
    }
    .myactive-enter-active,.myactive-leave-active{ 
      /* //此处是过度过程中，一般不用设置
        //该句的意思是 all表示所有的css变动  在 0.8s内完成  ease-out是一个速度曲线充置 */
        transition:all .8s ease;
    }

</style>
